<template>
    <Teleport to="#back">
    <div class="d-flex justify-content-center align-items-center h-100 loading-container" :style="{backgroundColor: background || ''}">
        <div class="loading-content">
            <div class="spinner-border text-info" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p v-if="text" class="text-info small">{{ text }}</p>
        </div>
    </div>
    </Teleport>
</template>

<script setup lang="ts">
import useDOMCreate from '../hooks/useDOMCreate'

defineProps({
    text: {
        type: String,
        default: 'Loading...'
    },
    background: {
        type: String
    }
})

useDOMCreate('back')
</script>

<style scoped>
.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 9999;
    text-align: center;
}
</style>